<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file</title>
    <script>
        function doSend() {
            // 初始化进度条
            document.getElementById("pg").value = 0;

            // 参数处理方式1
            // var username = document.getElementById("u").value;
            // var f = document.getElementById("h").files[0];
            // 使用 FormData 包装
            // var formdata = new FormData();
            // 追加参数: 第一个是参数名, 第二个是参数值
            // formdata.append("username", username);
            // formdata.append("headImage", f);

            // 参数处理方式2: 把form对象作为参数传入 FormData
            var formdata = new FormData(document.getElementById("f1"));

            // 原生ajax操作
            var xhr = new XMLHttpRequest();
            // 监听 文件上传进度
            xhr.upload.onprogress = function(event){
                /*
                lengthComputable 是一个表示进度信息是否可用的布尔值
                total 表示 根据 Content-Length (数据内容大小) 确定的预期的字节数量
                loaded 表示已经接收的字节数
                */
                if(event.lengthComputable){
                    // 计算 百分比
                    var per = Math.ceil((event.loaded/event.total)*100);
                    document.getElementById("pg").value = per;
                    if(per >= 100){
                        alert("上传完成");
                    }
                }
            };
            xhr.onload = function(){
                if(xhr.status == 200){
                    var txt = xhr.responseText;
                    console.log("responseText:", txt);
                    // 预览
                    document.getElementById("showImage").src = txt;
                }
            };
            xhr.open("post", "/wbs20052/ajax/day02/upload.php");
            // 不需要设置 请求头
            // 传入参数并，发送请求
            xhr.send(formdata);

        }
    </script>
</head>
<body>
    <form id="f1">
        用户名：<input type="text" id="u" name="username"> <br>
        头像：<input type="file" id="h" name="headImage"> <br>
        <progress id="pg" max="100" value="0" ></progress> <br>
        <input type="button" value="doSend" onclick="doSend()">
    </form>
    <div>
        <img src="" id="showImage" style="width: 200px;" alt="no image">
    </div>
</body>
</html>